<template>
    <div v-loading="loading" class="container cityInsight" style="height: 100%">
        <div class="left-info mid">
            <draw-type
                ref="drawType"
                :buildings="points"
                :city-name="cityName"
                @searchDrawTypeClick="searchDrawTypeClick"
                @drawTypeSelect="drawTypeSelect"
                @radiusValue="radiusValue"
                @resetPath="resetPath"
                @returnAfter="returnAfter"
            >
            </draw-type>
        </div>
        <div class="right-info mid" style="padding: 0 10px">
            <el-collapse accordion :model-value="0">
                <el-collapse-item title="楼盘列表" :name="0">
                    <map-points-table
                        ref="mapPointsTable"
                        :total-datas="selectedData"
                        :add-points="addPoints"
                        :delete-points="deletePoints"
                        :param="param"
                        :is-screen-inside="isScreenInside"
                        @refresh="$emit('refresh')"
                        @getSelectedPoint="getSelectedPoint"
                    ></map-points-table>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div class="left-bottom mid">
            <p>
                <span class="raidusSpan" style="background: #e60044"></span>
                已选
            </p>
            <p style="margin-top: 6px">
                <span class="raidusSpan" style="background: #278e2f"></span>
                未选
            </p>
        </div>

        <div class="map container">
            <dbMap
                ref="dbmap"
                :current-select-type="currentSelectType"
                v-bind="$attrs"
                :radius="radius"
                :buildings="points"
                @drawCancle="drawCancle"
                @showPremisesId="showPremisesId"
                @returnSelectedBuildings="returnSelectedBuildings"
            >
            </dbMap>
        </div>
        <building-detail v-model:diag-visible="buildingDialog" :premises-id="premisesId"></building-detail>
    </div>
</template>

<script>
import dbMap from './Map.vue';
import DrawType from './DrawType.vue';
import SingleSelectPopup from './SingleSelectPopup.vue';

import MapPointsTable from './MapPointsTable.vue';
import BuildingDetail from './BuildingDetail.vue';

const NAV_HEIGHT = 76;
const LEVEL_PROVINCE = 1;
const LEVEL_DEVICES = 3;
// ANOTHER_HEIGHT = 10,
// POPUP_WIDTH = 240;

// const cityPoint = require('./cityPoint.json');
export default {
    name: 'MapBox',

    components: {
        dbMap,
        DrawType,
        SingleSelectPopup,
        MapPointsTable,
        BuildingDetail,
    },
    props: {
        getPointList: {
            type: Function,
            required: true,
        },
        signType: {
            type: [Number, String],
            default: 0, // 屏0，框3，空就是框屏的全部
        },
    },
    data() {
        return {
            loading: false,
            diagVisible: true,
            showMap: false,
            points: [], // 当前所有的楼盘点位数据
            showTable: true,
            pathArr: {}, // 当前存在的画线path
            location: {
                x: 0,
                y: 0,
            },
            currentSelectType: null,
            radius: 1000,
            selectedData: [],
            buildingDialog: false,
            premisesId: 0,
            // getPointList: '',
            addPoints: '',
            deletePoints: '',
            param: {
                name: '全国',
                cityCode: '000000',
            },
            isScreenInside: true,
            isShow: {
                0: false, // 城市选择
                1: false,
            },
            initCityData: {
                name: '全国',
                cityCode: '000000',
            },
        };
    },
    computed: {
        cityName() {
            return this.param.name || this.param.cityName;
        },
    },
    watch: {
        getPointList: {
            handler(val) {
                if (val && val.length) {
                    this.points = val;
                }
            },
            deep: true,
        },
    },

    mounted() {
        // 初始化全国
        // this.param = this.initCityData;
        // setTimeout(() => {
        //     this.$refs.dbmap.setCenter(this.param, 7);
        // }, 500);
    },

    methods: {
        isLoading() {
            this.loading = true;
        },
        isShowMap() {
            this.showMap = true;
            if (this.$refs.dbmap) {
                // TODO
                this.$refs.dbmap.setCity({ name: this.param.name });
            }

            this.getBuildingsPoints();
        },
        toggle() {
            let val = 0;
            if (this.isShow[val]) {
                this.hide(val);
            } else {
                this.isShow[val] = true;
            }
        },
        hide(val) {
            this.isShow[val] = false;
        },
        // 城市选择
        returnResult(val) {
            if (this.param.name === val.name) {
                this.$message.warning('选择位置和当前所在位置一样！');
                return;
            }
            this.$confirm('切换城市将清空所选楼盘，确定要切换吗？', {
                cancelButtonText: '不了',
            })
                .then(() => {
                    this.param = val;
                    this.clearMap();
                    this.$refs.dbmap.setCenter(val, Number(val.typeLevel));

                    if (val.cityCode !== '000000') {
                        // 不是全国
                        this.getBuildingsPoints();
                    }
                })
                .catch(() => {});
        },
        // 城市定位
        fixedCity(citys) {
            this.$refs.dbmap.location().then((data) => {
                if (this.param.name !== data.name) {
                    this.clearMap();
                    // this.param = data;
                    this.$refs.dbmap.setCenter(data, LEVEL_DEVICES);
                    this.hide(0);
                    let item = this.getCityCode(data.name, citys);
                    if (!item) {
                        return this.$message.warning('当前城市还未开通点位！');
                    }
                    this.param = item;
                    this.getBuildingsPoints();
                } else {
                    this.$message.warning('定位城市和当前所在城市一样！');
                }
            });
        },

        // 获取推荐智能点位
        async getBuildingsPoints() {
            this.loading = true;
            this.getPointList({ cityCode: this.param.cityCode, signType: this.signType })
                .then((data) => {
                    if (data.length > 0) {
                        this.points = data;
                        this.points.forEach((item) => {
                            item.types = item.type;
                        });
                    } else {
                        this.points = [];
                    }

                    this.$emit('citySelected', this.param);
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        isShowTable() {
            this.showTable = !this.showTable;
        },
        async refresh() {
            await this.getPointList(this.param, this.isScreenInside).then((data) => {
                if (data.length > 0) {
                    this.points = data;
                    this.points.forEach((item) => {
                        item.types = item.type;
                    });
                } else {
                    this.points = [];
                }
            });
            this.$refs.dbmap.updateTableList();
        },
        //
        // 选择画线类型后回调函数
        // type为select时 location为手动定点选择的item
        // type不为select时 location为鼠标最后的点击位置
        //
        drawTypeSelect(location, type) {
            this.location.x = location.x;
            this.location.y = location.y - NAV_HEIGHT;
            if (type === 'handCircle') {
                this.hideAll();
                this.currentSelectType = { type: type };
                this.$refs.dbmap.closeDrawingManager();
            } else if (type === 'select') {
                this.$refs.dbmap.closeDrawingManager();
                this.$refs.dbmap.drawCircle(
                    { lat: parseFloat(location.lat), lng: parseFloat(location.lng) },
                    location.address
                );
            } else if (type === 'selectAndTo') {
                this.$refs.dbmap.closeDrawingManager();
                this.$refs.dbmap.drawCircle(
                    { lat: parseFloat(location.lat), lng: parseFloat(location.lng) },
                    location.address
                );
                this.$refs.dbmap.panTo(location);
            } else {
                this.hideAll();
                this.currentSelectType = { type: type };
                this.$refs.dbmap.triggerDraw(type);
            }
        },

        radiusValue(value) {
            this.radius = value;
        },
        clearMap() {
            // this.points = [];
            this.$refs.dbmap.clearPathArr(0);
            this.$refs.mapPointsTable.cleartypesFilter();
        },
        // 重置所有Path覆盖层
        resetPath() {
            this.clearMap();
            this.param = this.initCityData;
            // this.$refs.dbmap.setCenter(this.param, LEVEL_PROVINCE);
        },
        returnAfter() {
            this.$refs.dbmap.returnAfter();
        },
        // 取消其他显示
        hideAll() {
            for (let key in this.isShow) {
                this.isShow[key] = false;
            }
        },
        // 取消按钮选中状态
        drawCancle() {
            this.currentSelectType = null;
            this.$refs.drawType.cancleSelect();
        },
        // 查找选点按钮点击
        searchDrawTypeClick() {
            this.currentSelectType = null;
            this.hideAll();
        },
        // 给表格提供楼盘数据
        returnSelectedBuildings(val) {
            console.log(val);
            this.selectedData = val;
        },
        // 展示楼盘详情
        showPremisesId(premisesId) {
            this.premisesId = premisesId;
            this.buildingDialog = true;
        },
        // 选择的楼盘emit出去
        getSelectedPoint(val) {
            this.$emit('getSelectedPoint', val);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .mapDiolog {
    max-width: 1600px;
    min-width: 716px;
    height: 87vh;
    max-height: 760px;
    min-height: 560px;
    box-sizing: border-box;
    // top: 50%;
    // transform: translateY(-50%);
}
::v-deep .mapDiolog .el-dialog__header {
    box-sizing: border-box;
    height: 6vh;
    min-height: 42px;
}
::v-deep .mapDiolog .el-dialog__body {
    padding: 5px 20px 0 20px !important;
}
.indexButton {
    width: 68px;
    height: 28px;
    color: #333333;
}
.abc {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    // font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 900;
    color: #333333;
}
.cityInsight {
    position: relative;
    overflow: hidden;
    .tools {
        position: absolute;
        z-index: 2;
        top: 10px;
        left: 20px;
    }
    .draw-type {
        position: absolute;
        top: 20px;
        left: 258px;
        z-index: 10;
    }
    .left-info {
        position: absolute;
        z-index: 4;
        top: 20px;
        left: 20px;

        .filter-popup {
            background: #ffffff;
        }
        .select-style {
            position: absolute;
            top: 60px;
        }
        .city-select {
            left: 0;
        }
        .filter-container {
            left: 113px;
        }
    }
    .right-info {
        position: absolute;
        z-index: 4;
        top: 20px;
        right: 20px;
        width: 320px;
        background: white;
        border-radius: 2px;
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    }
    .left-bottom {
        position: absolute;
        z-index: 1;
        background: white;
        width: 54px;
        height: 60px;
        bottom: 150px;
        left: 20px;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }
    .raidusSpan {
        display: inline-block;
        margin-right: 2px;
        width: 8px;
        height: 8px;
        border-radius: 7px;
    }
    .left-select {
        position: absolute;
        z-index: 3;
        top: 29px;
        left: 30px;
    }
    .top-select {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }
    .mapPopup {
        position: absolute;
        z-index: 3;
    }
    .mouseMove-text {
        position: absolute;
        z-index: 10;
    }
    .map {
        height: 100%;

        z-index: 1;
    }
}
:deep(.el-collapse-item__header) {
    font-weight: 500;
    font-size: 16px;
    color: #333;
    &::after {
        position: absolute;
        right: 40px;
        color: #4d88ff;
        content: '展开';
    }
    &.is-active::after {
        content: '收起';
    }
    &.is-active .el-collapse-item__arrow {
        transform: rotate(-90deg);
    }
    .el-collapse-item__arrow {
        transform: rotate(90deg);
        color: #4d88ff;
    }
}
</style>
